// 核心缩放参数：控制足球整体大小
const scaleRatio = 0.9
const base = {
  polygon6: 200,
  polygon5: 170,
  translateZ: 238, // 六边形的基础距离
  polygon5Offset: 6, // 五边形往外移动的偏移量（核心调整值）
  containerScale: 0.6,
  fontSizeRatio: 0.15,
}

// 计算缩放后的参数（重点：为五边形单独设置更远的距离）
const scaled = {
  polygon6: base.polygon6 * scaleRatio,
  polygon5: base.polygon5 * scaleRatio,
  translateZ: base.translateZ * scaleRatio, // 六边形的最终距离
  polygon5TranslateZ: (base.translateZ + base.polygon5Offset) * scaleRatio, // 五边形的最终距离（更远）
  containerScale: base.containerScale * scaleRatio,
  fontSize: Math.max(base.polygon6 * base.fontSizeRatio * scaleRatio, 16),
}

let faceCount = 0
const texts = ['行', '情', '指']

// 动态设置CSS样式
function setDynamicStyles() {
  const style = document.createElement('style')
  style.textContent = `
 .polygon6 {
   width: ${scaled.polygon6}px;
   height: ${scaled.polygon6}px;
 }
 .polygon5 {
   width: ${scaled.polygon5}px;
   height: ${scaled.polygon5}px;
 }
 .container {
   transform: scale(${scaled.containerScale});
 }
 .box > div {
   font-size: ${scaled.fontSize}px;
 }
`
  document.head.appendChild(style)
}

// 绘制函数：根据面的类型（五边形/六边形）使用不同的translateZ
function draw(deg, len, className, startDeg = 0, rotateDeg = 0) {
  const fragment = document.createDocumentFragment()
  // 确定当前面的距离（五边形用polygon5TranslateZ，六边形用translateZ）
  const zDistance =
    className === 'polygon5' ? scaled.polygon5TranslateZ : scaled.translateZ

  for (let i = 0; i < len; i++) {
    const div = document.createElement('div')
    const span = document.createElement('span')
    faceCount++
    div.className = className
    div.classList.add(`face-${faceCount}`)
    const textIndex = faceCount % texts.length
    // span.innerText = texts[textIndex] + faceCount
    span.innerText = texts[textIndex]
    span.className = `face-text-${faceCount}`
    div.appendChild(span)
    div.style.transform = `
   rotateY(${Math.floor((360 / len) * i + startDeg)}deg) 
   rotateX(${deg}deg) 
   rotateZ(${rotateDeg}deg) 
   translateZ(${zDistance}px) /* 使用计算好的距离 */
 `
    fragment.appendChild(div)
  }
  document.querySelector('.box').appendChild(fragment)
}

export function initBall(ballSpeed) {
  setDynamicStyles()
  draw(-90, 1, 'polygon5')
  draw(-53, 5, 'polygon6', 36)
  draw(-26, 5, 'polygon5', 0, 180)
  draw(-11, 5, 'polygon6', 36)
  draw(11, 5, 'polygon6')
  draw(26, 5, 'polygon5', 36, 0)
  draw(53, 5, 'polygon6', 72)
  draw(90, 1, 'polygon5')

  const box = document.querySelector('.box')
  const systemWrap = document.querySelector('.system-wrap')
  const allFaces = box.querySelectorAll('div[class*="face-"]')
  const excludeFaces = box.querySelectorAll('.face-2, .face-12, .face-7')

  // 鼠标移入：停止动画，聚焦特定面
  systemWrap.addEventListener('mouseenter', () => {
    box.style.animation = 'unset' // 停止动画
    setTimeout(() => {
      box.style.transform = 'rotateY(0deg) rotateX(30deg) rotateZ(30deg)'
      box.style.transition = 'all 0.5s ease-in-out' // 添加过渡效果
    }, 10)

    allFaces.forEach((face) => face.classList.add('blur-effect'))
    excludeFaces.forEach((face) => face.classList.remove('blur-effect'))
    excludeFaces.forEach((face) => face.classList.add('focus-effect'))
  })

  // 鼠标移出：恢复动画，取消聚焦效果
  systemWrap.addEventListener('mouseleave', () => {
    box.style.transition = 'unset' // 移除过渡效果
    box.style.animation = `rotateBall ${ballSpeed}s linear infinite` // 恢复动画

    // 移除所有面的模糊效果
    allFaces.forEach((face) => face.classList.remove('blur-effect'))
    excludeFaces.forEach((face) => face.classList.remove('focus-effect'))
  })
}
